<template>
<div id="out_box">
  <div id="box">
    <h1 v-if="books==null">数据加载失败</h1>
		<ul>
			<li v-for="book in books">
        <router-link :to="{name:'BookDetail',query:{bid:book.id}}">
          		<img :src="'http://124.223.89.139/pic/'+book.img" alt="">
        </router-link>
				<h4>{{book.bname}}</h4>
        <p>{{book.author}},&nbsp;{{book.publishment}}&nbsp;出</p>

        <p v-if="book.currprice =='' || book.currprice == null ">
          <span>￥&nbsp;{{book.oriprice}}</span>
        </p>
				<p v-if="book.currprice !='' && book.currprice != null ">
          <span style="text-decoration:line-through">￥&nbsp;{{book.oriprice}}</span>
          <span>&nbsp;￥{{book.currprice}}</span>
        </p>
			</li>
		</ul>
	</div>
   <el-pagination class="pageSty"
  background
  layout="prev, pager, next"
  :current-page.sync="$root.queryCondition.pageNo"
  :page-size="$root.queryCondition.pageSize"
  :total="$root.queryCondition.recordTotal"
  @current-change="handleCurrentChange"
  >
   </el-pagination>
</div>
</template>

<script>
import {getBookListByCondition} from '../api/Book/book'
import {globalBus} from '../eventbus/globalBus'
export default {
  
    components :{
  },
  name:'BookL',
  props: [],
  data(){
      return{
        //每页数据上限为18
      books:[]
  }
  },
  methods:{
   getList(){
     var _this=this;
      getBookListByCondition(_this.$root.queryCondition).then((res)=>{
        _this.books=res.data.result
        this.$root.queryCondition.recordTotal=res.data.recordTotal
      }).catch((err)=>{
        console.log(err)
      })
  },
  handleCurrentChange(currentPage){
    this.$root.queryCondition.pageNo=currentPage
    this.getList()
  }
  },
  created(){
    this.getList()
  },
  mounted() {
     globalBus.$off("cid")
   globalBus.$on("cid",cid => {
   this.$root.queryCondition.cid=cid;
   this.getList();
 })

  //先销毁先前缓存的事件实例，避免重复调用接口
 globalBus.$off("keyword")
 globalBus.$on("keyword",keyword => {
     this.$root.queryCondition.keyword=keyword;
   this.getList();
 }) 
  }
}

</script>


<style  scoped>

#out_box
{
    margin: 0 auto;
    width: 1340px;
    height: 1050px;
}
#box ul{
		display: flex;
		flex-wrap: wrap;
	}
	#box li{
		padding: 3px;
		list-style: none;
		margin-right: 15px;
		border: 1px solid #eee;
	}
	#box img{
		width: 200px;
		height: 250px;
	}
.pageSty
{
  position:absolute;
  left: 42%;
  bottom: -220px;
}
</style>
